<template>
  <view style="margin: 0px 20rpx ;">
    <view style="height: 20rpx;"></view>

    <view
      style="background-color: white;margin-bottom: 20rpx;margin-top: 10rpx;display: flex; padding: 20rpx 40rpx;font-size: 26rpx; "
    >

			<view style="flex: 3.6;position: relative;" >
				<view style="color: #b7bece;letter-spacing: 2rpx;">物流信息</view>
				<view style="margin-top: 6rpx;letter-spacing: 2rpx;"
				  ><text>快递公司:</text>
				  <text v-if="options.expTextName"  style="margin-left: 10rpx;font-weight: bold;color: green;">
				    {{ options.expTextName }}</text>
					<text v-else style="margin-left: 10rpx;color: #b7bece;">暂无该单号记录</text>
				</view>
				<view style="margin-top: 10rpx;letter-spacing: 2rpx;"
				  ><text>快递单号:</text>

				  <text v-if="options.mailNo"  style="margin-left: 10rpx;font-weight: bold;font-family: kaiti;color: red;" >
				    {{ options.mailNo }}</text>

					<text v-else style="margin-left: 10rpx;color: #b7bece;" >
					  暂无该单号记录 </text>

				</view>
				<view style="text-align: center;position: absolute;top:0;right: 0;">
					<u-image height="80rpx" :src="options.logo" mode="heightFix" :fade="false" :lazy-load="false"></u-image>
				</view>
			</view>

    </view>

    <view >
      <view
        style="background-color: white;padding: 20rpx 40rpx;font-size: 26rpx;color: #b7bece;border-bottom: 1px solid #f2f2f2;letter-spacing: 2rpx; "
        >物流跟踪信息
      </view>

      <view
        style="background-color: white;padding: 20rpx 40rpx;font-size: 26rpx;color: #b7bece;letter-spacing: 2rpx;"
      >
        <text>数据最后更新时间:</text>
        <text style="letter-spacing: 2rpx;margin-left: 10rpx;">{{
          options.updateStr
        }}</text>
      </view>

			<!-- 传过去的数据是有物流记录的情况下 -->
      <view v-if="options.dataSize!==0"  class="express-step" style="background-color: white;">
        <view
          :class="[direction === 'column' ? 'express-step__column' : 'express-step__row']"
        >
          <!-- 右边展示内容区域 -->
          <view
            :class="[
              direction === 'column'
                ? 'express-step__column-text-container'
                : 'express-step__row-text-container',
            ]"
            style="overflow: hidden;"
          >
            <view
              v-for="(item, index) in options.data"
              :key="index"
              style="display: flex;flex-flow: row-reverse;padding: 14rpx; "
            >
              <!-- 右边的内容区域 -->
              <view style="flex: 1500;">
                <view>
                  <text
                    :style="{
                      color: index <= active ? activeColor : deactiveColor,
                    }"
                    :class="[
                      direction === 'column'
                        ? 'express-step__column-title'
                        : 'express-step__row-title',
                    ]"
                    >{{ item.time }}</text
                  >
                </view>
                <view>
                  <text
                    :style="{
                      color: index <= active ? activeColor : deactiveColor,
                    }"
                    :class="[
                      direction === 'column'
                        ? 'express-step__column-desc'
                        : 'express-step__row-desc',
                    ]"
                    >{{ item.context }}</text
                  >
                </view>
              </view>
              <!-- 右边内容区域从此结束 -->

              <!--左边的内容区域从这个地方开始  -->
              <view
                style="flex: 310;align-items: center;justify-items: center;"
                class="right-text"
              >
                <view
                  :class="[
                    direction === 'column'
                      ? 'express-step__column-check'
                      : 'express-step__row-check',
                  ]"
                  v-if="index === active-1"
                >
                </view>
                <view
                  :class="[
                    direction === 'column'
                      ? 'express-step__column-circle'
                      : 'express-step__row-circle',
                  ]"
                  v-else
                  :style="{
                    backgroundColor:
                      index <= active ? activeColor : deactiveColor,
                  }"
                ></view>
              </view>
              <!--左边的内容区域从这个地方结束  -->
            </view>
          </view>
        </view>
      </view>

			<view v-else  style="background-color: white;padding: 20px;"  >
					<view style="" >
						<u-empty text="暂无该物流记录"  style="height: 300rpx;" mode="search"></u-empty>
					</view>

					<view
					  style="background-color: white;padding: 20rpx 20rpx;font-size: 26rpx;color: #b7bece;letter-spacing: 2rpx;font-family:sans-serif;"
					>
					  <view>此快递查无记录</view>
						<view style="margin-top: 16rpx;" >可能并未揽件</view>
						<view style="margin-top: 16rpx;" > <text v-if="options.expTextName" >如需帮助,请联系【{{ options.expTextName }}】客服电话</text>
							<text v-else >请联系客服进行确认 </text>
						<text style="color: blue;font-weight: bold;margin-left: 10rpx;" >{{ options.tel}}</text> </view>
					</view>
			</view>
			<!-- 传过去的数据是没物流记录的情况下 -->

			<view style="text-align: center;padding: 20rpx; 0"  v-if="options.data !='' " >
				<u-image height="80rpx" :src="options.logo" mode="heightFix"></u-image>
			</view>
		</view>
  </view>
</template>
<script>
/**
 * Steps 步骤条
 * @description 评分组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
 * @property {Number} active 当前步骤
 * @property {String} direction = [row|column] 当前步骤
 * 	@value row 横向
 * 	@value column 纵向
 * @property {String} activeColor 选中状态的颜色
 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
 */

export default {
  name: "express-step",
  props: {
    direction: {
      // 排列方向 row column
      type: String,
      default: "row",
    },
    activeColor: {
      // 激活状态颜色
      type: String,
      default: "#1aad19",
    },
    deactiveColor: {
      // 未激活状态颜色
      type: String,
      default: "#a6a6a4",
    },
    active: {
      // 当前步骤
      type: Number,
      default: 0,
    },
    options: {
      type: Object,
      default() {
        return {};
      },
    }, // 数据
  },
  data() {
    return {};
  },
	filters:{
			expressFilter(value){
				switch(value){
					case '中通快递':return '95311';break;
					case '申通快递':return '95543';break;
					case '圆通快递':return '95554';break;
					case '顺丰快递':return '95338';break;
					case '邮政快递':return '11183';break;
					case '韵达快递':return '95546';break;
					default: break;
			}
	},
	}
};
</script>

<style lang="scss" scoped>
.express-step {
  display: flex;
  width: 100%;
}

.express-step__row {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.express-step__column {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row-reverse;
}

.express-step__row-text-container {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: flex-end;
  margin-bottom: 8px;
}

.express-step__column-text-container {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  flex: 1;
}

.express-step__row-text {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  flex: 1;
  flex-direction: column;
}

.express-step__column-text {
  padding: 14rpx 0px;
  border-bottom-style: solid;
  border-bottom-width: 2rpx;
  border-bottom-color: $uni-border-color;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.express-step__row-title {
  font-size: $uni-font-size-base;
  line-height: 32rpx;
  text-align: center;
}

.express-step__column-title {
  font-size: $uni-font-size-base;
  text-align: left;
  line-height: 36rpx;
}

.express-step__row-desc {
  font-size: 24rpx;
  line-height: 28rpx;
  text-align: center;
}

.express-step__column-desc {
  font-size: $uni-font-size-sm;
  text-align: left;
  line-height: 36rpx;
}

.express-step__row-container {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.express-step__column-container {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  width: 60rpx;
  flex-direction: column;
}

.express-step__row-line-item {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  flex-direction: row;
  flex: 1;
  height: 28rpx;
  line-height: 28rpx;
  align-items: center;
  justify-content: center;
}

.express-step__column-line-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.express-step__row-line {
  flex: 1;
  height: 2rpx;
  background-color: $uni-text-color-grey;
}

.express-step__column-line {
  width: 2rpx;
  background-color: $uni-text-color-grey;
}

.express-step__row-line--after {
  transform: translateX(2rpx);
}

.express-step__column-line--after {
  flex: 1;
  transform: translate(0px, 2rpx);
}

.express-step__row-line--before {
  transform: translateX(-2rpx);
}

.express-step__column-line--before {
  height: 12rpx;
  transform: translate(0px, -2rpx);
}

.express-step__row-circle {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: $uni-text-color-grey;
  margin: 0px 6rpx;
}

.express-step__column-circle {
  position: relative;
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background-color: $uni-text-color-grey;
  margin: 12rpx 0px 0rpx 0px;
  display: flex;
  margin-left: 56rpx;
  z-index: 3;
  // 这个地方偏移的距离等于伪类元素偏移的距离加上一个半边框的像素,因为是左边框8-2/2=3
}
.express-step__row-check {
  margin: 0px 12rpx;
}
.express-step__column-check {
  height: 28rpx;
  line-height: 28rpx;
  margin: 4rpx 0px;
}
.right-text {
  position: relative;
}
.right-text::before {
  position: absolute;
  top: 0rpx;
  bottom: -36rpx;
  margin-left: 62rpx;
  border-left: 2rpx solid #cccccc;
  content: "";
}
</style>
